<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>古董：{{ virtu }}件</h4>
    <h4>豪车：{{ car.brand }}，价格：{{ car.price }}万</h4>
    <Child />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from "./Child.vue";
import { ref, reactive, provide } from "vue";

let virtu = ref(10);
let car = reactive({
  brand: "宾利",
  price: 400,
});

function giveVirtu(value: number) {
  virtu.value -= value;
}
//向后代提供数据
provide("古董", { virtu, giveVirtu });
provide("豪车", car);
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>